<template>
    <div id="product">
        <van-nav-bar
                title="标题"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <!--轮播图-->
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img class="swipeImg" v-lazy="image.img_url"/>
            </van-swipe-item>
        </van-swipe>

        <div class='info'>
            <span>30天无忧退货</span>
            <span>48小时快速退款</span>
            <span>满88元免邮费</span>
        </div>

        <div class="proInfo">
            <h3 class="title">{{info.name}}</h3>
            <p class="brief">{{info.goods_brief}}</p>
            <p class="price">￥{{info.retail_price}}</p>
        </div>

        <van-cell title="请选择规格数量" is-link/>

        <!-- 商品参数 -->
        <div class="proParams">
            <h3>商品参数</h3>
            <div class="proItem" v-for="(item1,index1) in attribute" :key="index1">
                <span class="title">{{item1.name}}</span>
                <span class="value">{{item1.value}}</span>
            </div>
        </div>
        <!-- 商品详情 -->
        <div class="proDetail" v-html="info.goods_desc">

        </div>
        <!--        商品导航-->
        <van-goods-action>
            <van-goods-action-icon to="/buycart" :info="$store.state.cartTotal.goodsCount==0?'':$store.state.cartTotal.goodsCount" icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star-o" text="已收藏"  />
            <van-goods-action-button @click="chooseSku" type="warning" text="加入购物车"/>
            <van-goods-action-button type="danger" text="立即购买"/>
        </van-goods-action>

        <!-- 选择商品规格 -->
        <van-sku
                v-model="showSku"
                :sku="sku"
                :goods="goods"
                @buy-clicked="onBuyClicked"
                @add-cart="onAddCartClicked"
        />
    </div>
</template>

<script>
    import axios from 'axios'
    import {NavBar, Swipe, SwipeItem, Cell, GoodsAction, GoodsActionIcon, GoodsActionButton, Sku} from 'vant';

    let sku = {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
            {
                k: '颜色', // skuKeyName：规格类目名称
                v: [
                    {
                        id: '30349', // skuValueId：规格值 id
                        name: '红色', // skuValueName：规格值名称

                    },
                    {
                        id: '1215',
                        name: '蓝色',

                    }
                ],
                k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
            {
                id: 2259, // skuId，下单时后端需要
                price: 100, // 价格（单位分）
                's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
                's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
                stock_num: 110 // 当前 sku 组合对应的库存
            },
            {
                id: 2259, // skuId，下单时后端需要
                price: 100, // 价格（单位分）
                's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
                's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
                stock_num: 130 // 当前 sku 组合对应的库存
            }
        ],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存


    }
    export default {
        props: ['id'],
        data() {
            return {
                data: {},
                info: {},
                attribute: [],
                showSku: false,
                sku: sku,
                goods: {
                    // 商品标题
                    title: '测试商品',
                    // 默认商品 sku 缩略图
                    picture: 'https://img.yzcdn.cn/1.jpg'
                }

            }
        },
        components: {
            [NavBar.name]: NavBar,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [Cell.name]: Cell,
            [GoodsAction.name]: GoodsAction,
            [GoodsActionIcon.name]: GoodsActionIcon,
            [GoodsActionButton.name]: GoodsActionButton,
            [Sku.name]: Sku
        },
        computed: {
            images: function () {
                if (this.data.gallery == undefined) {
                    return []
                } else {
                    return this.data.gallery;
                }
            }
        },
        async created() {
            //存储：dispatch
            this.$store.dispatch('AjaxCart');
            let res = await axios.get(this.$root.api.GoodsDetail, {params: {id: this.id}})
            console.log(res.data)
            this.data = res.data.data;
            this.info = this.data.info;
            this.attribute = this.data.attribute;
            this.goods.picture = this.info.primary_pic_url;
            this.goods.title = this.info.name;
            this.sku.price = this.info.retail_price;
            this.sku.stock_num = this.info.goods_number;
            let tree = []
            this.data.specificationList.forEach((item, index) => {
                let arr = []
                item.valueList.forEach((product, i) => {
                    arr.push({
                        id: product.id, // skuValueId：规格值 id
                        name: product.value, // skuValueName：规格值名称
                    })
                })
                tree.push({
                    k: item.name, // skuKeyName：规格类目名称
                    v: arr,
                    k_s: "s-" + item.specification_id // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                })
            })
            this.sku.tree = tree;

        },
        methods: {
            onClickLeft: function () {
                this.$router.go(-1)
            },
            onBuyClicked: function () {
                // 将当前的内容提交到订单页
            },
            async onAddCartClicked(skuData) {
                //console.log(123)
                //获取选中的商品，并且提交到后端的购车API里
                //选择商品规格，并提交到购物车
                this.showSku = false;
                // console.log(skuData)
                let chooseContent = skuData.selectedSkuComb['s-1'] + '_' + skuData.selectedSkuComb['s-2']
                //console.log(chooseContent)
                let resultPro = this.data.productList.filter((item, index) => {

                    if (item.goods_specification_ids == chooseContent) {
                        return true
                    } else {
                        return false
                    }
                })
                // console.log(resultPro)

                let cartRes = await axios.post(this.$root.api.CartAdd, {
                    goodsId: resultPro[0].goods_id,
                    number: skuData.selectedNum,
                    productId: resultPro[0].id
                })
                let data = cartRes.data.data
                console.log(cartRes.data)
                //
                this.$store.commit('setCarList', data.cartList),
                    this.$store.commit('setCartTotal', data.cartTotal)
            },
            chooseSku() {
                this.showSku = true;
            }

        }
    }
</script>

<style lang="less">
    #product {
        .swipeImg {
            width: 100%;
        }

        .info {
            display: flex;
            justify-content: space-around;
            font-size: 12px;
            color: #999;
            height: 24px;
            line-height: 24px;
            background: #efefef;

            span {
                position: relative;
            }

            span::before {
                content: "";
                display: block;
                position: absolute;
                left: -10px;
                top: 8px;
                width: 4px;
                height: 4px;
                border-radius: 2px;
                border: 1px solid red;

            }
        }

        .proInfo {
            .title {
                font-weight: 500;
                padding: 10px 0 5px;
            }

            .brief {
                font-size: 12px;
                color: #999;
                padding: 3px;
            }

            .price {
                font-size: 16px;
                color: red;
                padding: 5px;
            }
        }

        .van-cell__title {
            text-align: left;
        }

        .proParams {
            padding-bottom: 20px;

            h3 {
                padding: 10px 0;
            }

            .proItem {
                width: 90%;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                height: 24px;
                color: #999;
                font-size: 12px;
                background: #efefef;
                line-height: 24px;
                text-align: left;

                span.title {
                    width: 55px;
                    padding: 0 10px;
                    border-right: 1px solid #ccc;
                }

                span.value {
                    width: 260px;

                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }


        }

        .proDetail {
            width: 100%;

            img {
                width: 100%
            }

            p {
                margin: 0;
                padding: 0;
                display: flex;
            }
        }

    }


</style>